<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>待办事项</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="refreshTodoList">刷新</el-button>
          </div>
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="待审批公文" name="document">
              <el-table
                v-loading="todoLoading"
                :data="documentList"
                style="width: 100%">
                <el-table-column
                  prop="title"
                  label="标题"
                  width="250">
                </el-table-column>
                <el-table-column
                  prop="submitter"
                  label="提交人"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="提交时间"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="urgency"
                  label="紧急程度"
                  width="100">
                  <template slot-scope="scope">
                    <el-tag :type="getUrgencyType(scope.row.urgency)">{{ scope.row.urgency }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="150">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleView(scope.row, 'document')">查看</el-button>
                    <el-button
                      size="mini"
                      type="primary"
                      @click="handleApprove(scope.row, 'document')">审批</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="empty-block" v-if="documentList.length === 0">
                <span class="empty-text">暂无待审批公文</span>
              </div>
            </el-tab-pane>
            <el-tab-pane label="待办任务" name="task">
              <el-table
                v-loading="todoLoading"
                :data="taskList"
                style="width: 100%">
                <el-table-column
                  prop="title"
                  label="标题"
                  width="250">
                </el-table-column>
                <el-table-column
                  prop="assigner"
                  label="分配人"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="dueDate"
                  label="截止日期"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="priority"
                  label="优先级"
                  width="100">
                  <template slot-scope="scope">
                    <el-tag :type="getPriorityType(scope.row.priority)">{{ scope.row.priority }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="150">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleView(scope.row, 'task')">查看</el-button>
                    <el-button
                      size="mini"
                      type="success"
                      @click="handleComplete(scope.row)">完成</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="empty-block" v-if="taskList.length === 0">
                <span class="empty-text">暂无待办任务</span>
              </div>
            </el-tab-pane>
            <el-tab-pane label="待参加会议" name="meeting">
              <el-table
                v-loading="todoLoading"
                :data="meetingList"
                style="width: 100%">
                <el-table-column
                  prop="title"
                  label="会议主题"
                  width="250">
                </el-table-column>
                <el-table-column
                  prop="organizer"
                  label="组织者"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="startTime"
                  label="开始时间"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="room"
                  label="会议室"
                  width="120">
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="150">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleView(scope.row, 'meeting')">查看</el-button>
                    <el-button
                      size="mini"
                      type="info"
                      @click="handleJoin(scope.row)">参加</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="empty-block" v-if="meetingList.length === 0">
                <span class="empty-text">暂无待参加会议</span>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>最新公告</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="viewAllNotices">查看全部</el-button>
          </div>
          <div v-for="(notice, index) in noticeList" :key="notice.id" class="notice-item">
            <div class="notice-title">
              <el-tag v-if="notice.isTop" type="danger" size="mini" style="margin-right: 5px;">置顶</el-tag>
              <el-tag v-if="notice.isUrgent" type="warning" size="mini" style="margin-right: 5px;">紧急</el-tag>
              <span class="title-text" @click="viewNotice(notice)">{{ notice.title }}</span>
            </div>
            <div class="notice-info">
              <span>{{ notice.publisher }}</span>
              <span>{{ notice.createTime }}</span>
            </div>
            <el-divider v-if="index < noticeList.length - 1"></el-divider>
          </div>
          <div class="empty-block" v-if="noticeList.length === 0">
            <span class="empty-text">暂无公告</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="editProfile">编辑</el-button>
          </div>
          <div class="user-profile">
            <div class="avatar-container">
              <img :src="userInfo.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" class="user-avatar">
            </div>
            <div class="info-container">
              <h3>{{ userInfo.name }}</h3>
              <p>{{ userInfo.department }} - {{ userInfo.position }}</p>
              <p><i class="el-icon-phone"></i> {{ userInfo.phone }}</p>
              <p><i class="el-icon-message"></i> {{ userInfo.email }}</p>
            </div>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>今日日程</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="viewSchedule">查看更多</el-button>
          </div>
          <div v-for="(schedule, index) in todaySchedules" :key="schedule.id" class="schedule-item">
            <div class="schedule-time">{{ schedule.time }}</div>
            <div class="schedule-content">
              <div class="schedule-title">{{ schedule.title }}</div>
              <div class="schedule-location" v-if="schedule.location">
                <i class="el-icon-location"></i> {{ schedule.location }}
              </div>
            </div>
            <el-divider v-if="index < todaySchedules.length - 1"></el-divider>
          </div>
          <div class="empty-block" v-if="todaySchedules.length === 0">
            <span class="empty-text">今日暂无日程</span>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>工作统计</span>
          </div>
          <div class="work-stats">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-title">待办任务</div>
                  <div class="stat-value">{{ workStats.pendingTasks }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-title">已完成任务</div>
                  <div class="stat-value">{{ workStats.completedTasks }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-title">待审批</div>
                  <div class="stat-value">{{ workStats.pendingApprovals }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-title">已审批</div>
                  <div class="stat-value">{{ workStats.completedApprovals }}</div>
                </div>
              </el-col>
            </el-row>
            <div style="margin-top: 20px;">
              <div class="progress-title">任务完成率</div>
              <el-progress :percentage="workStats.taskCompletionRate" :format="percentageFormat"></el-progress>
            </div>
            <div style="margin-top: 20px;">
              <div class="progress-title">审批处理率</div>
              <el-progress :percentage="workStats.approvalCompletionRate" :format="percentageFormat"></el-progress>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      activeTab: 'document',
      todoLoading: false,
      documentList: [
        {
          id: 1,
          title: '关于年度预算调整的请示',
          submitter: '张三',
          createTime: '2023-01-15 09:30:00',
          urgency: '紧急'
        },
        {
          id: 2,
          title: '市场部人员调整方案',
          submitter: '李四',
          createTime: '2023-01-14 14:20:00',
          urgency: '普通'
        },
        {
          id: 3,
          title: '新产品上市推广计划',
          submitter: '王五',
          createTime: '2023-01-13 16:45:00',
          urgency: '特急'
        }
      ],
      taskList: [
        {
          id: 1,
          title: '完成第一季度销售报告',
          assigner: '张三',
          createTime: '2023-01-10 09:00:00',
          dueDate: '2023-01-20',
          priority: '高'
        },
        {
          id: 2,
          title: '准备产品发布会演示文稿',
          assigner: '李四',
          createTime: '2023-01-12 14:30:00',
          dueDate: '2023-01-18',
          priority: '中'
        },
        {
          id: 3,
          title: '更新部门工作手册',
          assigner: '王五',
          createTime: '2023-01-14 11:20:00',
          dueDate: '2023-01-25',
          priority: '低'
        }
      ],
      meetingList: [
        {
          id: 1,
          title: '周例会',
          organizer: '张三',
          startTime: '2023-01-16 09:00:00',
          room: '会议室A'
        },
        {
          id: 2,
          title: '产品研发讨论会',
          organizer: '李四',
          startTime: '2023-01-16 14:30:00',
          room: '会议室B'
        },
        {
          id: 3,
          title: '市场推广策略会议',
          organizer: '王五',
          startTime: '2023-01-17 10:00:00',
          room: '大会议室'
        }
      ],
      noticeList: [
        {
          id: 1,
          title: '关于春节放假安排的通知',
          publisher: '行政部',
          createTime: '2023-01-10 14:00:00',
          isTop: true,
          isUrgent: false
        },
        {
          id: 2,
          title: '关于系统升级维护的通知',
          publisher: 'IT部',
          createTime: '2023-01-15 09:00:00',
          isTop: false,
          isUrgent: true
        },
        {
          id: 3,
          title: '关于年度体检安排的通知',
          publisher: '人事部',
          createTime: '2023-01-12 11:30:00',
          isTop: false,
          isUrgent: false
        }
      ],
      userInfo: {
        name: '张三',
        department: '研发部',
        position: '高级工程师',
        phone: '13800138000',
        email: 'zhangsan@example.com',
        avatar: ''
      },
      todaySchedules: [
        {
          id: 1,
          time: '09:00 - 10:00',
          title: '周例会',
          location: '会议室A'
        },
        {
          id: 2,
          time: '11:00 - 12:00',
          title: '项目进度汇报',
          location: '会议室B'
        },
        {
          id: 3,
          time: '14:30 - 16:00',
          title: '产品研发讨论',
          location: '会议室C'
        }
      ],
      workStats: {
        pendingTasks: 5,
        completedTasks: 12,
        pendingApprovals: 3,
        completedApprovals: 8,
        taskCompletionRate: 70,
        approvalCompletionRate: 85
      }
    }
  },
  created() {
    this.getTodoList()
  },
  methods: {
    getTodoList() {
      this.todoLoading = true
      // 模拟API调用
      setTimeout(() => {
        this.todoLoading = false
      }, 1000)
      
      // 实际项目中应该调用API
      // fetchTodoList().then(response => {
      //   this.documentList = response.data.documents
      //   this.taskList = response.data.tasks
      //   this.meetingList = response.data.meetings
      //   this.todoLoading = false
      // })
    },
    refreshTodoList() {
      this.getTodoList()
      this.$message({
        message: '刷新成功',
        type: 'success'
      })
    },
    handleTabClick(tab) {
      console.log(tab.name)
    },
    getUrgencyType(urgency) {
      const typeMap = {
        '普通': '',
        '紧急': 'warning',
        '特急': 'danger'
      }
      return typeMap[urgency]
    },
    getPriorityType(priority) {
      const typeMap = {
        '低': 'info',
        '中': '',
        '高': 'warning',
        '紧急': 'danger'
      }
      return typeMap[priority]
    },
    handleView(row, type) {
      if (type === 'document') {
        this.$router.push(`/document/view/${row.id}`)
      } else if (type === 'task') {
        this.$router.push(`/task/view/${row.id}`)
      } else if (type === 'meeting') {
        this.$router.push(`/meeting/view/${row.id}`)
      }
    },
    handleApprove(row) {
      this.$router.push(`/document/approval/${row.id}`)
    },
    handleComplete(row) {
      this.$confirm('确认完成该任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '任务已完成!'
        })
        // 更新列表
        const index = this.taskList.findIndex(item => item.id === row.id)
        if (index !== -1) {
          this.taskList.splice(index, 1)
        }
        
        // 实际项目中应该调用API
        // completeTask(row.id).then(() => {
        //   this.$message({
        //     type: 'success',
        //     message: '任务已完成!'
        //   })
        //   this.getTodoList()
        // })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handleJoin(row) {
      this.$message({
        message: `正在加入会议：${row.title}`,
        type: 'success'
      })
      // 实际项目中可能会跳转到会议页面或启动会议客户端
    },
    viewNotice(notice) {
      this.$router.push(`/notice/view/${notice.id}`)
    },
    viewAllNotices() {
      this.$router.push('/notice/list')
    },
    editProfile() {
      this.$router.push('/user/profile')
    },
    viewSchedule() {
      this.$router.push('/schedule')
    },
    percentageFormat(percentage) {
      return percentage + '%'
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}
.empty-block {
  text-align: center;
  margin: 20px 0;
  color: #909399;
}
.notice-item {
  padding: 10px 0;
}
.notice-title {
  font-size: 16px;
  margin-bottom: 5px;
}
.title-text {
  cursor: pointer;
}
.title-text:hover {
  color: #409EFF;
}
.notice-info {
  font-size: 12px;
  color: #909399;
  display: flex;
  justify-content: space-between;
}
.user-profile {
  display: flex;
  align-items: center;
  padding: 10px;
}
.avatar-container {
  margin-right: 20px;
}
.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.info-container {
  flex: 1;
}
.info-container h3 {
  margin-top: 0;
  margin-bottom: 10px;
}
.info-container p {
  margin: 5px 0;
  color: #606266;
}
.schedule-item {
  display: flex;
  padding: 10px 0;
}
.schedule-time {
  width: 120px;
  color: #606266;
  font-weight: bold;
}
.schedule-content {
  flex: 1;
}
.schedule-title {
  font-size: 14px;
  margin-bottom: 5px;
}
.schedule-location {
  font-size: 12px;
  color: #909399;
}
.stat-item {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 15px;
  text-align: center;
}
.stat-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}
.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}
.progress-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}
</style>
